<template>
	<view class="calculateView">
		<header :style="'padding-top: '+height.top+'px;height: '+(44+height.top)+'px;'">
			<image :style="'height: '+(44+height.top)+'px;'" src="../../../static/home/4.png" mode="aspectFill"></image>
			<view :style="'height: '+height.height+'px;top: '+height.top+';'">
				<u-icon @click="retreat(1)" name="arrow-left" color="#272635" size="32"></u-icon>
				<span>支付</span>
			</view>
		</header>
		<nav>
			<span @click="select(1)" :class="{'optfor':type==1}">到店自提</span>
			<span @click="select(3)" :class="{'optfor':type==3}">同城配送</span>
			<span @click="select(2)" :class="{'optfor':type==2}">快递发货</span>
		</nav>
		<view v-if="type!=1" class="address" @click="apifun.navigate('/pages/my/sitelist','type=pay');">
			<p v-if="!siteac.address">请选择收货地址<u-icon name="arrow-right" color="#9E9E9E" size="33"></u-icon></p>
			<view v-if="siteac.address" class="substance">
				<image mode="widthFix" src="../../../static/home/26.png"></image>
				<view>
					<h1>{{siteac.address}}</h1>
					<span>{{siteac.full_address}}</span>
					<P>{{siteac.username}}<text>{{siteac.mobile}}</text>
					</P>
				</view>
				<span>修改
					<u-icon name="arrow-right" color="#9E9E9E" size="27"></u-icon>
				</span>
			</view>
		</view>
		<view class="commodity" v-for="val in commodity" :key="val.id">
			<image :src="URLimg+val.goods_info.image" mode="aspectFill"></image>
			<view class="introduce">
				<p>{{val.goods_info.name}}</p>
				<span>库存：{{val.stock}}</span>
				<view>
					<span><text>￥</text>{{val.sell_price}}</span>
					<p>
						<span @click="minus(val)">
							<u-icon name="minus" color="#9E9E9E" size="20"></u-icon>
						</span>
						<i></i>
						<input @input="input(val)" type="number" v-model="val.num" />
						<i></i>
						<span @click="plus(val)">
							<u-icon name="plus" color="#9E9E9E" size="20"></u-icon>
						</span>
					</p>
				</view>
			</view>
		</view>
		<view class="charge">
			<view>
				<span>商品金额</span>
				<p>￥{{(Number(price)+Number(derate)-Number(data.expressage)).toFixed(2)}}<span></span></p>
			</view>
			<view v-if="type!=1">
				<span>快递费</span>
				<p>￥{{data.expressage}}<span></span></p>
			</view>
			<view @click="unfold('优惠券','coupon')">
				<span>优惠券</span>
				<p><text v-if="coupon.amount">-￥{{coupon.amount}}</text><span><u-icon name="arrow-right" color="#9E9E9E"
							size="22"></u-icon></span></p>
			</view>
			<view v-if="type!=1" @click="unfold('运费券','freight')">
				<span>运费券</span>
				<p><text v-if="freight.amount">-￥{{freight.amount}}</text><span><u-icon name="arrow-right"
							color="#9E9E9E" size="22"></u-icon></span></p>
			</view>
			<view>
				<span>余额(￥{{data.balance}})</span>
				<p @click="deduction" :class="{'optFor':state==1}">抵扣<i><text></text></i></p>
			</view>
		</view>
		<footer>
			<view>
				<p>实付：<text>￥{{price}}</text></p>
				<span>共优惠 <text>￥{{derate}}</text></span>
			</view>
			<span v-if="issub" @click="cartBuyOrder">立即支付</span>
			<span v-if="!issub">立即支付</span>
		</footer>
		<!-- 选择优惠卷 -->
		<u-popup :show="couponShow" mode="bottom" @close="close" closeable>
			<view class="coupon">
				<header>{{title}}</header>
				<scroll-view class="main" scroll-y>
					<main v-if="title=='优惠券'">
						<view class="discounteach marginAuto blockbg" v-for="(item,index) in array.list" :key="index"
							@click="selects(item)">
							<view class="diseachl">
								<view class="diseachly" style="top:-35rpx;"></view>
								<view class="diseachly" style="bottom:-35rpx;"></view>
								<view class="diseachl-moeny" v-if="item.coupon_type == 0">
									<text style="font-size:24rpx;">￥</text>
									<text style="font-size:50rpx;">{{ item.amount }}</text>
								</view>
								<view class="diseachl-moeny" v-if="item.coupon_type == 1">
									<text style="font-size:50rpx;">{{ item.amount }}折</text>
								</view>
								<view class="diseachl-moeny" v-if="item.coupon_type == 2">
									<text style="font-size:50rpx;">免单</text>
								</view>
								<view class="diseachl-dec" v-if="item.coupon_type == 0">满{{ item.less_amount }}可用</view>
								<view class="diseachl-dec" v-if="item.coupon_type == 1">折扣券</view>
								<view class="diseachl-dec" v-if="item.coupon_type == 2">免单券</view>
							</view>
							<view class="diseachc">
								<view class="diseachc-name" v-if="item.class == 1">商品券</view>
								<view class="diseachc-name" v-if="item.class == 2">运费券</view>
								<view class="diseachc-time" style="margin-top:16rpx;">有效期至：{{ item.use_end_time }}
								</view>
								<!-- <view class="diseachc-time" style="color:#333333;"></view> -->
							</view>
							<view class="diseachr">
								<i :class="{'optFor':coupon.id==item.id}"></i>
							</view>
						</view>
					</main>
					<main v-if="title=='运费券'">
						<view class="discounteach marginAuto blockbg" v-for="(item,index) in array.freight_list"
							:key="index" @click="selects(item)">
							<view class="diseachl">
								<view class="diseachly" style="top:-35rpx;"></view>
								<view class="diseachly" style="bottom:-35rpx;"></view>
								<view class="diseachl-moeny" v-if="item.coupon_type == 0">
									<text style="font-size:24rpx;">￥</text>
									<text style="font-size:50rpx;">{{ item.amount }}</text>
								</view>
								<view class="diseachl-moeny" v-if="item.coupon_type == 1">
									<text style="font-size:50rpx;">{{ item.amount }}折</text>
								</view>
								<view class="diseachl-moeny" v-if="item.coupon_type == 2">
									<text style="font-size:50rpx;">免单</text>
								</view>
								<view class="diseachl-dec" v-if="item.coupon_type == 0">满{{ item.less_amount }}可用</view>
								<view class="diseachl-dec" v-if="item.coupon_type == 1">折扣券</view>
								<view class="diseachl-dec" v-if="item.coupon_type == 2">免单券</view>
							</view>
							<view class="diseachc">
								<view class="diseachc-name" v-if="item.class == 1">商品券</view>
								<view class="diseachc-name" v-if="item.class == 2">运费券</view>
								<view class="diseachc-time" style="margin-top:16rpx;">有效期至：{{ item.use_end_time }}
								</view>
								<!-- <view class="diseachc-time" style="color:#333333;"></view> -->
							</view>
							<view class="diseachr">
								<i :class="{'optFor':freight.id==item.id}"></i>
							</view>
						</view>
					</main>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				issub: true,
				price: 0,
				derate: 0,
				state: 0,
				couponShow: false,
				type: 1,
				height: {},
				Timeout: "",
				array: {
					list: [],
					freight_list: [],
				},
				pricearr: [],
				commodity: [],
				URLimg: this.URLimg,
				siteac: {},
				title: '优惠卷',
				variable: '',
				data: {
					expressage: 12,
					balance: '0.00'
				},
				coupon: {
					amount: 0
				},
				freight: {
					amount: 0
				}
			};
		},
		onLoad() {
			this.height = uni.getStorageSync('header')
			if (uni.getStorageSync('shopping')) {
				this.commodity = uni.getStorageSync('shopping')
				this.data.expressage = this.commodity[0].freight
				// uni.removeStorageSync('shopping')
				this.commodity.forEach(val => {
					if (this.pricearr.some(value => val.discount_id == value.id)) {
						let ins = this.pricearr.findIndex(j => j.id == val.discount_id)
						this.pricearr[ins].list.push(val)
					} else {
						this.pricearr.push({
							id: val.discount_id,
							max: Number(val.discount_amount),
							discounts: Number(val.discount_discount),
							list: [val]
						})
					}
				})
			} else {
				this.retreat(1)
			}
			this.prices()
			this.apifun.unirequest('/api/User/getUserInfo', 'post', {}, (res) => {
				this.data.balance = res.data.money || '0.00'
				this.siteac = res.data.address || {}
			})
		},
		methods: {
			wxpaymini(sendData) { // 微信支付
				let that = this;
				uni.getProvider({
					service: 'payment',
					success: function(res) {
						if (~res.provider.indexOf('wxpay')) {
							uni.requestPayment({ // 支付
								"provider": "wxpay",
								"orderInfo": sendData,
								"timeStamp": sendData.timeStamp,
								"nonceStr": sendData.nonceStr,
								"package": sendData.package,
								"signType": sendData.signType,
								"paySign": sendData.paySign,
								success: function(res) {
									that.apifun.toast("支付成功");
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/homeList/succeed/succeed?title=支付成功&url=/pages/order/list'
										});
									}, 1000)
								},
								fail: function(err) {
									uni.navigateBack({
										delta: 1
									});
									that.apifun.toast("支付失败");
								}
							});
						}
					}
				});
			},
			cartBuyOrder() {
				if (!this.siteac.id && this.type != 1) {
					return this.apifun.toast('请选择地址')
				}
				this.issub = false
				let goods_cart_id = []
				this.commodity.forEach(val => {
					goods_cart_id.push(val.id)
				})
				this.apifun.unirequest('/api/order/cartBuyOrder', 'post', {
					goods_cart_id,
					coupon_id: this.coupon.id,
					pay_type: 1,
					order_type: this.type,
					address_id: this.siteac.id,
					coupon_freight_id: this.freight.id,
					deduction: this.state
				}, (res) => {
					if (res.code == 0) {
						return this.apifun.toast(res.msg)
					}
					let data = {
						order_sn: res.data.order_sn
					}
					this.apifun.unirequest("/api/pay/pay", "post", data, (res => {
						if (res.code == 0) {
							return this.apifun.toast(res.msg)
						}
						if (res.data.appId) {
							this.wxpaymini(res.data)
						} else {
							this.apifun.toast("支付成功");
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/homeList/succeed/succeed?title=支付成功&url=/pages/order/list'
								});
							}, 1000)
						}
					}), true, true)
				})
			},
			selects(val) {
				if (this[this.variable].id == val.id) {
					this[this.variable] = {}
				} else {
					this[this.variable] = val
				}
				this.couponShow = false
				this.prices(false)
			},
			checkCoupon() {
				this.apifun.unirequest('/api/coupon/checkCoupon', 'post', {
					amount: this.price + (this.coupon.amount||0) + (this.freight.amount||0),
					order_type: this.type,
				}, (res) => {
					this.array = res.data
					this.freight = {
						amount: 0
					}
					this.coupon = {
						amount: 0
					}
					this.prices(false)
				}, false, true)
			},
			unfold(title, variable) {
				this.title = title
				this.variable = variable
				this.couponShow = true
			},
			close() {
				this.couponShow = false
			},
			setShoppingCart(val) {
				this.apifun.unirequest('/api/order/setShoppingCart', 'post', {
					id: val.id,
					num: val.num,
				}, () => {}, false, true)
			},
			retreat: (delta) => {
				uni.navigateBack({
					delta,
				});
			},
			prices(state = true) {
				let price = 0
				this.commodity.forEach(val => {
					price += Number(val.sell_price) * Number(val.num)
				})
				let MaxOut = 0
				this.pricearr.forEach(val => {
					if (val.max) {
						let total = 0
						val.list.forEach(val => {
							total += Number(val.num) * Number(val.sell_price)
						})
						if (total > val.max) {
							MaxOut += (total - (total * val.discounts))
						}
					}
				})
				//  + (this.state ? Number(this.data.balance) || 0 : 0)
				let freight = this.type != 1 ? Number(this.freight.amount) > Number(this.data.expressage) ? Number(this
					.data
					.expressage) : Number(this.freight.amount) || 0 : 0
				this.derate = (Number(this.coupon.amount) || 0) + freight + Number(MaxOut)
				this.price = price + (this.type != 1 ? Number(this.data.expressage) : 0) - this.derate
				console.log(state)
				if (state) {
					this.checkCoupon()
				}
			},
			deduction() {
				this.state = this.state ? 0 : 1
			},
			select(ins) {
				if (ins != this.type) {
					this.type = ins
					if (this.type == 3) {
						this.freight = {}
					} else {
						this.freight = {
							num: 3
						}
					}
					this.prices()
				}
			},
			input(val) {
				clearTimeout(this.Timeout)
				this.Timeout = setTimeout(() => {
					if (Number(val.num) > Number(val.stock)) {
						val.stock = Number(val.stock)
					}
					if (Number(val.stock) < 1) {
						val.stock = 1
					}
					this.setShoppingCart(val)
					this.prices()
				}, 1500)
			},
			minus(val) {
				if (Number(val.num) > 1) {
					val.num = Number(val.num) - 1
					this.setShoppingCart(val)
					this.prices()
				}
			},
			plus(val) {
				if (Number(val.num) < Number(val.stock)) {
					val.num = Number(val.num) + 1
					this.setShoppingCart(val)
					this.prices()
				}
			}
		}
	}
</script>

<style lang="scss">
	.calculateView {
		padding-bottom: 140rpx;

		.coupon {
			width: 100%;
			height: 70vh;
			display: flex;
			flex-direction: column;
			background-color: #f4f4f4;

			&>.main {
				flex: 1;
				width: 690rpx;
				margin: 0 auto;

				main {
					width: 100%;

					.blockbg {
						width: 640rpx;
						border-radius: 20rpx;
						background-color: #fff;
						padding: 24rpx;
						margin-top: 20rpx;
					}

					.discounteach {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: space-between;
						overflow: hidden;

						.diseachl {
							position: relative;
							border-right: 1px dashed #E2E2E2;
							padding-right: 20rpx;

							.diseachly {
								position: absolute;
								right: -14rpx;
								width: 26rpx;
								height: 26rpx;
								border-radius: 50%;
								background-color: #F4F5F6;
							}

							.diseachl-moeny {
								color: #333;
							}

							.diseachl-dec {
								font-size: 24rpx;
								color: #9E9E9E;
							}

						}

						.diseachc {
							width: 51%;

							.diseachc-name {
								font-size: 32rpx;
								color: #333;
								line-height: 44rpx;
								margin-top: 10rpx;
							}

							.diseachc-time {
								color: #999999;
								font-size: 20rpx;
								line-height: 30rpx;
							}
						}

						.diseachr {
							width: 140rpx;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;

							&>.optFor {
								background-color: #D31E11 !important;
							}

							&>i {
								width: 30rpx;
								height: 30rpx;
								border-radius: 50%;
								background-color: #ccc;
							}
						}

						.dqimg {
							position: absolute;
							left: -0rpx;
							bottom: -40rpx;
							width: 200rpx;
							height: 156rpx;
						}
					}
				}
			}

			&>header {
				width: 100%;
				font-size: 18px;
				font-weight: bold;
				text-align: center;
				line-height: 80rpx;
			}
		}

		&>footer {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			padding: 0 34rpx 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			&>view {
				display: flex;
				align-items: flex-end;

				&>span {
					font-size: 12px;
					color: #9E9E9E;
					font-weight: bold;

					&>text {
						color: #D31E11;
					}
				}

				&>p {
					font-size: 14px;
					font-weight: bold;
					margin-right: 60rpx;

					&>text {
						color: #D31E11;
					}
				}
			}

			&>span {
				width: 190rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #9E190F;
				color: #fff;
				font-size: 14px;
				border-radius: 35rpx;
			}
		}

		&>.charge {
			width: 690rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 18rpx auto 0;

			&>view {
				width: 100%;
				padding: 0 26rpx 0 34rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				font-size: 15px;
				color: #666666;

				&>p {
					display: flex;
					align-items: center;

					&>i {
						width: 34rpx;
						height: 34rpx;
						border: 1rpx solid #888;
						box-sizing: border-box;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 28rpx;
						transition: all .3s;

						&>text {
							width: 26rpx;
							height: 26rpx;
							background-color: #888;
							border-radius: 50%;
							transition: all .3s;
						}
					}

					&>span {
						width: 42rpx;
						display: flex;
						justify-content: center;
					}
				}

				&>.optFor {
					&>i {
						border: 1rpx solid #9E190F !important;

						&>text {
							background-color: #9E190F !important;
						}
					}
				}
			}
		}

		&>.commodity {
			width: 690rpx;
			height: 250rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 14rpx 34rpx 14rpx 14rpx;
			box-sizing: border-box;
			margin: 16rpx auto 0;
			display: flex;
			align-items: center;

			&>.introduce {
				flex: 1;

				&>p {
					font-size: 15px;
					font-weight: bold;
					@include csstext(1);
				}

				&>span {
					font-size: 14px;
					color: #9E9E9E;
					display: block;
					margin: 10rpx 0;
				}

				&>view {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>span {
						color: #D31E11;
						font-size: 18px;
						font-weight: bold;

						&>text {
							font-size: 12px;
						}
					}

					&>p {
						width: 160rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						background: #EBEBEB;
						border-radius: 10rpx;

						&>input {
							flex: 1;
							height: 100%;
							font-size: 14px;
							text-align: center;
						}

						&>i {
							width: 1px;
							height: 34rpx;
							background: #D8D8D8;
						}

						&>span {
							width: 46rpx;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}

			&>image {
				width: 220rpx;
				height: 220rpx;
				@include cssimg;
				border-radius: 20rpx;
				margin-right: 12rpx;
			}
		}

		&>.address {
			width: 690rpx;
			min-height: 100rpx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 14rpx;

			&>.substance {
				width: 100%;
				padding: 24rpx 26rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: flex-start;

				&>view {
					flex: 1;
					margin: 0 12rpx;

					&>p {
						font-size: 26rpx;
						font-weight: bold;

						&>text {
							margin-left: 50rpx;
						}
					}

					&>span {
						font-size: 26rpx;
						display: block;
						margin: 10rpx 0 22rpx;
						color: #666666;
					}

					&>h1 {
						width: 100%;
						line-height: 40rpx;
						font-size: 30rpx;
					}
				}

				&>span {
					display: flex;
					align-items: center;
					font-size: 13px;
					color: #9E9E9E;

					&>.u-icon {
						margin-left: 12rpx;
					}
				}

				&>image {
					width: 40rpx;
					@include cssimg;
				}
			}

			&>p {
				height: 100rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 15px;
				color: #666666;
				width: 100%;
				box-sizing: border-box;
			}
		}

		&>nav {
			width: 630rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;

			&>span {
				width: 200rpx;
				height: 90rpx;
				border-radius: 10rpx;
				background: url('../../../static/home/25.png');
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333;
				font-size: 15px;
				font-weight: bold;
				box-sizing: border-box;
			}

			&>.optfor {
				border: 1rpx solid #9E190F;
				color: #9E190F !important;
			}
		}

		&>header {
			width: 750rpx;
			margin: 0 auto;
			position: sticky;
			top: 0;
			z-index: 999;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			&>view {
				width: 690rpx;
				z-index: 999;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				&>span {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					font-size: 18px;
					font-weight: bold;
				}

				&>.u-icon {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			&>image {
				width: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 998;
				@include cssimg;
			}
		}
	}
</style>